<style>
.map {
  height: 100%;
  overflow: hidden;
}
.map-tools {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 999;
}
</style>

<div class="map-tools">
  <button id="add">添加</button>
  <button id="remove">移除</button>
</div>
<div class="map" id="map"></div>

<script>
  const map = L.map('map', {
    center: [22.52, 113.94],
    zoom: 4,
    maxZoom: 18,
    minZoom: 3,
    fullscreenControl: false,
    zoomControl: true,
    scaleControl: false
  })
  const gdLayer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    subdomains: '1234'
  })
  gdLayer.addTo(map)

  const scaleOptions = {
    position: 'bottomright',     // 显示位置，可选值[topleft, topright, bottomleft, bottomright]
    maxWidth: 100,              // 页面元素最大宽度（单位px）
    metric: true,               // 是否显示m/km比例尺
    imperial: false,            // 是否显示mi/ft比例尺
    updateWhenIdle: true        // 是否仅在地图的moveend事件触发更新
  };
  const scaleControl = L.control.scale(scaleOptions); // 定义控件

  document.getElementById('add').onclick = () => {
    map.addControl(scaleControl);
    // scaleControl.addTo(map)
  }

  document.getElementById('remove').onclick = () => {
    // map.removeControl(scaleControl);
    scaleControl.remove()
  }
</script>